window.onload = function () {

  //#region 班级渲染
  getStudentOverview();
  function getStudentOverview() {
    axios.get("/student/overview").then(result => {
      console.log(result);
      const { total, avgSalary, avgAge, proportion } = result.data

      document.querySelector(".total").innerText = total;
      document.querySelector(".avgSalary").innerText = avgSalary;
      document.querySelector(".avgAge").innerText = avgAge;
      document.querySelector(".proportion").innerText = proportion;
    })
  }
  //#endregion

  //#region 薪资折线图
  getStudentList();
  function getStudentList() {
    axios.get("/student/list").then(result => {
      console.log(result);
      const arr = result.data;
      renderLine(arr);
    })
  }

  // 根据数组来渲染折线图
  function renderLine(arr) {
    const myChart = echarts.init(document.querySelector(".line"));
    //根据大数组arr来重新创建三个小数组
    //期望薪资数组
    const salaryList = arr.map(value => value.salary)
    //实际薪资数组
    const trueSalaryList = arr.map(value => value.truesalary)
    //同学名称数组
    const names = arr.map(value => value.name)

    // 指定图表的配置项和数据
    const option = {
      // 控制不同组的数据的颜色
      // color: ['yellow', 'red'],
      dataZoom: [
        {
          show: true,
          realtime: true,
          start: 0,
          end: 10,
        },
      ],
      title: {
        text: '薪资',
      },
      tooltip: {
        trigger: 'axis',
      },
      legend: {},
      xAxis: {
        type: 'category',
        boundaryGap: false,
        // 同学名称 充当 x坐标刻度
        data: names,
      },
      yAxis: {},
      series: [
        {
          name: '期望薪资',
          type: 'line',
          smooth: true, // 圆滑的线条
          symbol: 'none',//线上拐点位置的样式，none表示没有；也可以是实心圆、空心圆、方块.....
          data: salaryList,
          // 单独指定颜色
          itemStyle: {
            color: '#ee6666',
          },
        },
        {
          name: '实际薪资',
          type: 'line',
          smooth: true, // 圆滑的线条
          symbol: 'none',
          data: trueSalaryList,
          itemStyle: {
            color: '#5470c6',
          },
        },
      ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }

  //#endregion

  //#region 成绩柱状图

  //点击三个小点点显示出其他次成绩
  const bar = document.querySelector(".bar span");
  const otherScore = document.querySelector("#batch");
  let lis = otherScore.querySelectorAll("li");
  //设置开关 判断三个点点的状态
  let isNone = false;
  bar.addEventListener("click", function () {
    if (isNone === false) {
      otherScore.style.display = 'block';
      isNone = true;
    } else {
      otherScore.style.display = 'none';
      isNone = false;
    }
  })
  // lis.forEach(value => {
  //   value.addEventListener("click", function (e) {
  //     let batch = $(this).index() + 1; 
  //     console.log(batch);
  //     getScore(batch);
  //   })
  // })
  lis.forEach((value,index) => {
    value.addEventListener("click", function () {
      let batch = index + 1; 
      console.log(batch);
      getScore(batch);
    })
  })


  //获取成绩
  getScore();
  function getScore(batch=1) {
    axios.get("/score/batch", { params: { batch } }).then(result => {
      // console.log(result);
      const arr = result.data;


      //根据获取的数据渲染柱状图
      const myChart = echarts.init(document.querySelector(".barChart"));
      //根据大数组获取组号
      const group = arr.group;
      //获取平均分
      const avgScore = arr.avgScore;
      //小于60分的人
      const lt60 = arr.lt60;
      //小于60分到80分的人
      const gt60 = arr.gt60;
      //大于80分的人
      const gt80 = arr.gt80;

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        //设置柱状图的边距
        grid: {
          left: '7%',
          right: '7%',
          bottom: 30,
          top: 30
        },
        legend: {},

        xAxis: [
          {
            type: 'category',
            axisPointer: {
              type: 'shadow'
            },
            data: group
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            max: 100,
            interval: 10,
            axisLabel: {
              formatter: '{value} 分'
            }
          },
          {
            type: 'value',
            min: 0,
            max: 10,
            interval: 1,
            axisLabel: {
              formatter: '{value} 人'
            }
          }
        ],
        series: [
          {
            name: '平均分',
            type: 'bar',
            barGap: 0,
            barWidth: 20,
            data: avgScore
          },
          {
            name: '小于60分',
            type: 'bar',
            //柱状图的Y轴占比
            yAxisIndex: 1,
            //柱状图的宽
            barWidth: 20,
            //数据后面加单位
            tooltip: {
              valueFormatter: function (value) {
                return value + '人';
              }
            },
            data: lt60
          },
          {
            name: '60分到80分之间',
            type: 'bar',
            yAxisIndex: 1,
            barWidth: 20,
            tooltip: {
              valueFormatter: function (value) {
                return value + '人';
              }
            },
            data: gt60
          },
          {
            name: '大于80分',
            type: 'bar',
            yAxisIndex: 1,
            barWidth: 20,
            tooltip: {
              valueFormatter: function (value) {
                return value + '人';
              }
            },
            data: gt80
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    })
  }


  //#endregion

  //#region 饼状图
   const panelPie = echarts.init(document.querySelector(".row .pie"));


   axios.get("/student/list").then((result) => {
     // console.log(result);
     const arr = result.data;
     //声明一个空数组
     let Canton = [];
     //数组遍历 获取到所有省放到一个数组中
     arr.map((value) => {
       if (value.province) {
         Canton.push(value.province);
       }
     });
     let arrA = [];
     //省数组遍历
     Canton.forEach((item) => {
       //
       let index = arrA.findIndex((v) => v.name === item); // 没有找到则返回 -1
       if (index >= 0) {
         // 让当前这个省的value++
         arrA[index].value++;
       } else {
         // 向arrA数组中新增一个对象 { value: 1, name: 省的名字 }
         arrA.push({ value: 1, name: item });
       }
     });
     // console.log(arrA);
     //饼状图
     const option = {
       title: {
         text: "籍贯 Hometown",
         left: 0,
       },
       tooltip: {
         formatter: "各地人员分布 <br/>{b}{c}人  占比{d}%",
       },
       series: [
         {
           name: "Nightingale Chart",
           type: "pie",
           radius: [30, 180],
           center: ["50%", "50%"],
           roseType: "area",
           itemStyle: {
             borderRadius: 6,
           },
           //插入数组
           data: arrA,
         },
       ],
     };
     panelPie.setOption(option);
 })
  //#endregion

  //#region 进京路线
  //发送请求查询全部同学

  axios.get("/student/list").then(result => {
    // console.log(result);
    const data = result.data;
    let chinaGeoCoordMap = {}
    let chinaDatas = []
    // 2.通过result.data.data转换格式为需要的对象
    data.forEach(value => {
      chinaGeoCoordMap[value.province] = [value.jing, value.wei];
      // 把转换后的数据用push存入数组中
      chinaDatas.push([{ name: value.province, value: 0 }]);
    })
    getDrawMap(chinaGeoCoordMap, chinaDatas);

  })
  // getDrawMap();
  function getDrawMap(chinaGeoCoordMap, chinaDatas) {
    let myChart = echarts.init(document.querySelector(".map"));



    // 指定图表的配置项和数据
    // let chinaGeoCoordMap = {
    //   '黑龙江': [127.9688, 45.368],
    //   '内蒙古': [110.3467, 41.4899],
    //   "吉林": [125.8154, 44.2584],
    //   '北京市': [116.4551, 40.2539],
    //   "辽宁": [123.1238, 42.1216],
    //   "河北": [114.4995, 38.1006],
    //   "天津": [117.4219, 39.4189],
    //   "山西": [112.3352, 37.9413],
    //   "陕西": [109.1162, 34.2004],
    //   "甘肃": [103.5901, 36.3043],
    //   "宁夏": [106.3586, 38.1775],
    //   "青海": [101.4038, 36.8207],
    //   "新疆": [87.9236, 43.5883],
    //   "西藏": [91.11, 29.97],
    //   "四川": [103.9526, 30.7617],
    //   "重庆": [108.384366, 30.439702],
    //   "山东": [117.1582, 36.8701],
    //   "河南": [113.4668, 34.6234],
    //   "江苏": [118.8062, 31.9208],
    //   "安徽": [117.29, 32.0581],
    //   "湖北": [114.3896, 30.6628],
    //   "浙江": [119.5313, 29.8773],
    //   "福建": [119.4543, 25.9222],
    //   "江西": [116.0046, 28.6633],
    //   "湖南": [113.0823, 28.2568],
    //   "贵州": [106.6992, 26.7682],
    //   "云南": [102.9199, 25.4663],
    //   "广东": [113.12244, 23.009505],
    //   "广西": [108.479, 23.1152],
    //   "海南": [110.3893, 19.8516],
    //   '上海': [121.4648, 31.2891]
    // };
    // let chinaDatas = [
    //   [{
    //     name: '黑龙江',
    //     value: 0
    //   }], [{
    //     name: '内蒙古',
    //     value: 0
    //   }], [{
    //     name: '吉林',
    //     value: 0
    //   }], [{
    //     name: '辽宁',
    //     value: 0
    //   }], [{
    //     name: '河北',
    //     value: 0
    //   }], [{
    //     name: '天津',
    //     value: 0
    //   }], [{
    //     name: '山西',
    //     value: 0
    //   }], [{
    //     name: '陕西',
    //     value: 0
    //   }], [{
    //     name: '甘肃',
    //     value: 0
    //   }], [{
    //     name: '宁夏',
    //     value: 0
    //   }], [{
    //     name: '青海',
    //     value: 0
    //   }], [{
    //     name: '新疆',
    //     value: 0
    //   }], [{
    //     name: '西藏',
    //     value: 0
    //   }], [{
    //     name: '四川',
    //     value: 0
    //   }], [{
    //     name: '重庆',
    //     value: 0
    //   }], [{
    //     name: '山东',
    //     value: 0
    //   }], [{
    //     name: '江苏',
    //     value: 0
    //   }], [{
    //     name: '安徽',
    //     value: 0
    //   }], [{
    //     name: '湖北',
    //     value: 0
    //   }], [{
    //     name: '浙江',
    //     value: 0
    //   }], [{
    //     name: '福建',
    //     value: 0
    //   }], [{
    //     name: '江西',
    //     value: 0
    //   }], [{
    //     name: '湖南',
    //     value: 0
    //   }], [{
    //     name: '贵州',
    //     value: 0
    //   }], [{
    //     name: '广西',
    //     value: 0
    //   }], [{
    //     name: '海南',
    //     value: 0
    //   }], [{
    //     name: '上海',
    //     value: 0
    //   }], [{
    //     name: '北京市',
    //     value: 0
    //   }]
    // ];

    let convertData = function (data) {
      let res = [];
      for (let i = 0; i < data.length; i++) {
        let dataItem = data[i];
        let fromCoord = chinaGeoCoordMap[dataItem[0].name];
        let toCoord = [108.810326, 23.217832];
        if (fromCoord && toCoord) {
          res.push([{
            coord: fromCoord,
            value: dataItem[0].value
          }, {
            coord: toCoord,
          }]);
        }
      }
      return res;
    };
    let series = [];
    [['广西壮族自治区', chinaDatas]].forEach(function (item, i) {
      console.log(item)
      series.push({
        type: 'lines',
        zlevel: 2,
        effect: {
          show: true,
          period: 4, //箭头指向速度，值越小速度越快
          trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: 'arrow', //箭头图标
          symbolSize: 5, //图标大小
        },
        lineStyle: {
          normal: {
            width: 1, //尾迹线条宽度
            opacity: 1, //尾迹线条透明度
            curveness: .3 //尾迹线条曲直度
          }
        },
        data: convertData(item[1])
      }, {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: { //涟漪特效
          period: 4, //动画时间，值越小速度越快
          brushType: 'stroke', //波纹绘制方式 stroke, fill
          scale: 4 //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          normal: {
            show: true,
            position: 'right', //显示位置
            offset: [5, 0], //偏移设置
            formatter: function (params) {//圆环显示文字
              return params.data.name;
            },
            fontSize: 13
          },
          emphasis: {
            show: true
          }
        },
        symbol: 'circle',
        symbolSize: function (val) {
          return 5 + val[2] * 5; //圆环大小
        },
        itemStyle: {
          normal: {
            show: false,
            color: '#f00'
          }
        },
        data: item[1].map(function (dataItem) {
          return {
            name: dataItem[0].name,
            value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
          };
        }),
      },
        //被攻击点
        {
          type: 'scatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            period: 4,
            brushType: 'stroke',
            scale: 4
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              //offset:[5, 0],
              color: '#0f0',
              formatter: '{b}',
              textStyle: {
                color: "#0f0"
              }
            },
            emphasis: {
              show: true,
              color: "#f60"
            }
          },
          symbol: 'pin',
          symbolSize: 50,
          data: [{
            name: item[0],
            value: chinaGeoCoordMap[item[0]].concat([10]),
          }],
        }
      );
    });

    option = {
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(166, 200, 76, 0.82)',
        borderColor: '#FFFFCC',
        showDelay: 0,
        hideDelay: 0,
        enterable: true,
        transitionDuration: 0,
        extraCssText: 'z-index:100',
        formatter: function (params, ticket, callback) {
          //根据业务自己拓展要显示的内容
          let res = "";
          let name = params.name;
          let value = params.value[params.seriesIndex + 1];
          res = "<span style='color:#fff;'>" + name + "</span><br/>发票流入：<br/>份数：24,534 份<br/>金额：34,534.53 元<br/>税额：134,534.75 元<br/>发票流出：<br/>份数：34,585 份<br/>金额：23,478.75 元<br/>税额：15,337.54 元";
          return res;
        }
      },
      backgroundColor: "#141845",
      visualMap: { //图例值控制
        min: 0,
        max: 1,
        calculable: true,
        show: true,
        color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
        textStyle: {
          color: '#fff'
        }
      },
      geo: {
        map: 'china',
        zoom: 1.2,
        label: {
          emphasis: {
            show: false
          }
        },
        roam: true, //是否允许缩放
        itemStyle: {
          normal: {
            color: 'rgba(51, 69, 89, .5)', //地图背景色
            borderColor: '#516a89', //省市边界线00fcff 516a89
            borderWidth: 1
          },
          emphasis: {
            color: 'rgba(37, 43, 61, .5)' //悬浮背景
          }
        }
      },
      series: series
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

  }
  //#endregion


}